<template>
  <div class="height100 flex flex_d bg_fff" :class="is_close?'close_nav':''">
    <!-- <div class="common_tt flex_ac">
      <a href="javascript:;" @click="$router.go(-1)" class="back"><img src="@/assets/back.png" alt=""></a>
      <div class="title pad_lr20">分数组合 <span style="font-size: 16px; display: none;">所属题库：题库模板1</span></div>
    </div> -->
    <div class="flex1 flex">

      <div class="flex1 page_div">
        <el-scrollbar class="page_div_scroll">
          <div class="f16 pad_tb20"><span class="color">题库列表 / 题库</span> / 分数组合</div>
          <el-form :model="queryParams" ref="queryForm"  label-width="104px">
            <el-row class="flex flex_w">
              <FormItem label="规则名称" class="bg_form_item" type="input" :form="queryParams" @keyenter="handleQuery" prop="title" clearable />
              <div class="search_btns">
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
              </div>
            </el-row>
          </el-form>
          <div class="flex_ac pad_b20 list_op_btn">
            <el-button type="danger" :disabled="multiple" @click="handleDelete" plain v-if="have_auth('/answer/editscore/del')">批量删除</el-button>
            <el-button type="primary" @click='add_rule' :disabled="edit_id!=''" v-if="have_auth('/answer/editscore/add')">添加规则</el-button>
          </div>
          <el-table v-loading="loading" :data="list"  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="规则名称" align="left"  prop="title" :show-overflow-tooltip="true" width="290px">
              <template slot-scope="scope">
                <span v-if="edit_id!=scope.row.id">{{scope.row.title}}</span>
                <span v-if="edit_id==scope.row.id"><el-input placeholder="请输入" v-model="add_form.title" style="width: 220px;" size="medium"></el-input></span>
              </template>
            </el-table-column>
            <el-table-column label="规则内容" align="left">
              <template slot-scope="scope">
                <template v-if="edit_id!=scope.row.id">
                  <span v-for="(item,index) in scope.row.rule" :key="index" v-if="scope.row.rule.length>0">
                    <span class="answer_tt" v-html="item.title"></span> <span v-if="index<scope.row.rule.length-1">、</span>
                  </span>
                  <span v-if="scope.row.rule.length==0">暂无</span>
                </template>
                <template v-if="edit_id==scope.row.id">
                  <div class="rule_items flex" :class="add_form.subject_ids.length==0?'border':''">
                    <div class="flex1">
                      <span class="zhuan_span2" v-for="(item,index) in add_form.subject_ids" :key="index"><span class="answer_tt" v-html="item.title"></span> <i style="cursor: pointer;" class="el-icon-close" @click="add_form.subject_ids.splice(index,1)"></i></span>
                    </div>
                    <div style="padding-top: 5px;">
                      <a href="javascript:;" @click="edit_item(add_form)"><img src="@/assets/ans_edit.png" alt=""></a>
                      <a href="javascript:;" style="margin-left: 16px;" @click="add_form.subject_ids=[]"><img src="@/assets/answer1.png" alt=""></a>
                    </div>
                  </div>
                </template>
              </template>
            </el-table-column>
            <el-table-column label="最大分值" align="left"  prop="max"  width="150px">
              <template slot-scope="scope">
                <span v-if="edit_id!=scope.row.id">{{scope.row.max}}</span>
                <span v-if="edit_id==scope.row.id"><el-input placeholder="请输入" v-model="add_form.max" style="width: 105px;" size="medium"></el-input></span>
              </template>
            </el-table-column>
            <el-table-column label="最小分值" align="left"  prop="min"  width="150px">
              <template slot-scope="scope">
                <span v-if="edit_id!=scope.row.id">{{scope.row.min}}</span>
                <span v-if="edit_id==scope.row.id"><el-input placeholder="请输入" v-model="add_form.min" style="width: 105px;" size="medium"></el-input></span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="right" class-name="small-padding fixed-width" width="180px" fixed="right">
              <template slot-scope="scope">
                <el-button v-if="edit_id!=scope.row.id && have_auth('/answer/editscore/edit')" size="mini" type="text" @click="try_edit_item(scope.row)">编辑</el-button>
                <div class="s_item" style="text-align: right;" v-if="edit_id==scope.row.id">
                  <el-button size="mini" type="primary" @click="save" :loading="is_ajax">{{is_ajax?'保存中···':'保存'}}</el-button>
                  <el-button size="mini" type="text" @click="cancel_edit(scope.row)">取消</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- <div class="add_rule_div" v-if="is_edit">
            <div class="item flex_ac">
              <div class="s_item" style="width: 55px;"></div>
              <div class="s_item" style="width: 290px;"><el-input placeholder="请输入" v-model="add_form.title" style="width: 220px;" size="medium"></el-input></div>
              <div class="flex1 s_item">
                <div class="rule_items flex">
                  <div class="flex1">
                    <span class="zhuan_span2" v-for="(item,index) in add_form.subject_ids" :key="index">{{item.title}} <i style="cursor: pointer;" class="el-icon-close"></i></span>
                  </div>
                  <div style="padding-top: 5px;">
                    <a href="javascript:;" @click="edit_item"><img src="@/assets/ans_edit.png" alt=""></a>
                    <a href="javascript:;" style="margin-left: 16px;"><img src="@/assets/answer1.png" alt=""></a>
                  </div>
                </div>
              </div>
              <div class="s_item" style="width: 150px;"><el-input placeholder="请输入" style="width: 75px;" type="number" size="medium"></el-input></div>
              <div class="s_item" style="width: 150px;"><el-input placeholder="请输入" style="width: 75px;" type="number" size="medium"></el-input></div>
              <div class="s_item" style="width: 180px; text-align: right;">
                <el-button size="mini" type="primary">保存</el-button>
                <el-button size="mini" type="text" @click="is_edit=false">取消</el-button>
              </div>
            </div>
          </div> -->
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.page_size"
            @pagination="getList"
          />

        </el-scrollbar>

      </div>
    </div>
    <el-dialog v-dialogDrag :close-on-click-modal="true" title="分数组合·规则内容" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" label-position="top" :rules="rules" label-width="100px">
        <div class="search">
          <el-input placeholder="请输入题目名称" v-model="keywords" style="width:100%;" type="text" size="medium"></el-input>
          <a href="javascript:;" >搜索</a>
        </div>
        <!-- <div class="pad_t20" style="max-height: 80vh; overflow: auto;"> -->
        <el-scrollbar style="height: 60vh;">
          <div class="r_item flex_ac" v-for="(item,index) in sub_list" v-if="item.title.indexOf(keywords)!=-1">
            <el-checkbox v-model="item.is_check"></el-checkbox><span class="zhuan_span margin_l20 flex_s">第{{index+1}}题</span><div class="flex1 pad_l10"><span class="margin_l10">{{index+1}}. 【{{type_text[item.type]}}】<span class="answer_tt" v-html="item.title"></span></span></div>
          </div>
        </el-scrollbar>
        <!-- </div> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open=false;">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')" :loading="is_ajax">{{is_ajax?'保存中···':'确定'}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'projectAdd',
  data () {
    return {
      is_ajax:false,
      loading:false,
      is_close:false,
      value:'',
      id:'',
      form: {
        file:[]
      },
      type_text:{1:'单选题',2:'多选题',3:'填空题',4:'描述题',5:'矩阵单选题',6:'矩阵多选题',7:'矩阵填空题'},
      // 表单校验
      rules: {
        no: [
          { required: true, message: "项目编号不能为空", trigger: "blur" }
        ],
        title: [
          { required: true, message: "项目名称不能为空", trigger: "blur" }
        ]
      },
      openOptions: [{label:'当前页面打开',value:0},{label:'新页面打开',value:1}],
      checked:false,
      open:false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      total: 0,
      // 定时任务表格数据
      list: [],
      // 查询参数
      queryParams: {
        page: 1,
        page_size: 10,
        title: undefined,
        type: undefined,
        status: undefined
      },
      add_form:{
        title:'',
        subject_ids:[],
        min:'',
        max:''
      },
      sub_list:[],
      keywords:'',
      have_ids:[],
      edit_id:''
    }
  },
  mounted() {
    this.id=this.$route.query.modelid || '';
    this.getList()
  },
  methods:{
    cancel_edit(row){
      if(row.id==999999999999){
        this.list.splice(0,1)
      }
      this.edit_id=''
    },
    add_rule(){
      if(this.edit_id!=''){
        return false;
      }
      this.have_ids=[];
      this.edit_id=999999999999;
      this.add_form={
        id:this.edit_id,
        title:'',
        subject_ids:[],
        min:'',
        max:''
      };
      this.list.unshift({...this.add_form})
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    try_edit_item(row){
      row.subject_ids=row.rule;
      this.add_form={...row}
      this.edit_id=row.id
    },
    edit_item(row){
      let ids=[];
      for(let i=0;i<row.subject_ids.length;i++){
        ids.push(parseInt(row.subject_ids[i].id))
      }
      this.have_ids=[...ids];
      this.keywords='';
      this.open=true;
      this.get_subs()
    },
    get_subs(){
      const _this=this;
      _this.axios.get("/api/subject.GradeSet/subject_list", {params:{q_id:_this.id,keywords:_this.keywords,page_size:9999999}}).then(function(res) {
        if(res){
          let list=res.message;
          for(let i=0;i<list.length;i++){
            if(_this.have_ids.indexOf(list[i].id)==-1){
              list[i].is_check=false;
            }else{
              list[i].is_check=true;
            }
          }
          _this.sub_list = [...list];
        }
      }).catch(function(error) {
        console.log(error);
      })
    },
    save(){
      const _this=this;

      if(!_this.add_form.title){
        this.tip_show('请输入规则名称','error')
        return false;
      }
      if(_this.add_form.subject_ids.length==0){
        this.tip_show('请设置规则内容','error')
        return false;
      }
      if(_this.add_form.max===''){
        this.tip_show('请输入最大分值','error')
        return false;
      }
      if(_this.add_form.min===''){
        this.tip_show('请输入最小分值','error')
        return false;
      }
      _this.is_ajax=true;
      let ids=[];
      for(let i=0;i<_this.add_form.subject_ids.length;i++){
        ids.push(_this.add_form.subject_ids[i].id)
      }
      let _data={
        grade_id:_this.add_form.id==999999999999?'':_this.add_form.id,
        q_id:_this.id,
        subject_ids:ids.join(','),
        min:_this.add_form.min,
        max:_this.add_form.max,
        title:_this.add_form.title
      };
      console.log(_data);
      let url="/api/subject.GradeSet/set_sorce";
      _this.axios.post(url, _data).then(function(data) {
        if(data){
          _this.tip_show('操作成功','success');
          _this.cancel_edit(_this.add_form);
          _this.getList()
        }
        _this.is_ajax=false;
      }).catch(function(error) {
        _this.is_ajax=false
        console.log(error);
      })
    },
    submitForm(formName) {
      let arr=[];
      const _this=this;
      for(let i=0;i<_this.sub_list.length;i++){
        if(_this.sub_list[i].is_check){
          arr.push(_this.sub_list[i])
        }
      }
      this.add_form.subject_ids=arr;
      this.open=false
    },
    /** 查询定时任务列表 */
    getList() {
      const _this=this;
      this.loading = true;
      let _data={...this.queryParams};
      _data.q_id=this.id
      _this.axios.get("/api/subject.GradeSet/index", {params:_data}).then(function(res) {
        if(res){
          _this.list = res.message.data;
          _this.total = res.message.total;
          _this.loading = false;
        }
      }).catch(function(error) {
        console.log(error);
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams= {
        page: 1,
        page_size: 10,
        title: undefined,
        type: undefined,
        status: undefined
      }
      this.handleQuery();
    },
    /** 删除按钮操作 */
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      const _this=this;
      this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          _this.axios.post("/api/subject.GradeSet/del_rules", {ids:ids}).then(function(res) {
            if(res){
              _this.tip_show('操作成功','success')
              _this.getList();
            }
          }).catch(function(error) {
            console.log(error);
          })
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.zhuan_span{background:#E4EAF0; color: #1F2329; line-height: 28px; font-size: 16px; padding: 0 12px; display: inline-block; border-radius: 28px;}
.subject_items .item{padding: 12px 20px; line-height: 22px; font-size: 18px; margin-bottom: 8px; background: #F4F7FA;}

.add_rule_div .item{padding: 12px 0px; background: #F4F7FA; font-size: 15px;}
.add_rule_div .s_item{padding: 0px 10px;}
.rule_items{background: #fff; border:1px solid #DCDFE6; border-radius: 4px; padding: 6px 12px 0px 6px;}
.rule_items.border{padding-bottom: 6px;}
.rule_items .zhuan_span2{background: #EFF7FF; color: #1F2329; line-height: 26px; font-size: 15px; padding: 0 12px; display: inline-block; border-radius: 28px;margin-bottom: 6px; margin-right: 8px;}

.search{position: relative;}
.search a{display: block; position: absolute; right: 3px; top: 3px; background: #DFE6EE; width: 62px; text-align: center;line-height: 30px; border-radius: 4px; color: #004EA2;}
.r_item{font-size: 16px; padding: 12px ;}
</style>
